<template>
  <div>
    <header_slot></header_slot>
    <select_slot></select_slot>
    <div class="wrap">
      <!-- <div class="imgs hand"></div> -->
      <div class="texts hand">
        <p>收银台</p>
      </div>
      <div>
        <p>订单提交成功，请尽快支付</p>
      </div>
      <div>
        <p>
          应付金额
          <span class="redtext">{{all.ad}}</span>元
        </p>
      </div>
      <div class="card">
        <p>请选择支付方式</p>
        <p>银行卡支付</p>
        <el-radio-group v-model="radio">
          <tr>
            <el-radio v-model="radio" label="1" border>建设银行</el-radio>
          </tr>
          <tr>
            <el-radio v-model="radio" label="2" border>农业银行</el-radio>
          </tr>
          <tr>
            <el-radio v-model="radio" label="3" border>中国银行</el-radio>
          </tr>
        </el-radio-group>
      </div>
      <el-button type="danger" @click="dialogVisible = true">立即支付</el-button>
      <el-button type="danger" @click="clicks">添加到订单</el-button>
      <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span class="zf">是否支付</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="qd()">确 定</el-button>
        </span>
      </el-dialog>-->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span class="zf">支付成功</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sy()">继续看看其他商品</el-button>
          <el-button type="primary" @click="tz()">查看订单</el-button>
        </span>
      </el-dialog>
      <div class="btn">
        <p>推荐使用</p>
        <el-button type="primary" plain>支付宝</el-button>
        <el-button type="success" plain>微信支付</el-button>
      </div>
    </div>
    <footer_slot></footer_slot>
  </div>
</template>
<script>
import axios from "axios";
import header_slot from "./header-slot";
import select_slot from "./select-slot";
import footer_slot from "./footer-slot";
export default {
  components: {
    header_slot,
    select_slot,
    footer_slot,
  },
  data() {
    return {
      radio: "1",
      all: [],
      alls: {},
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 立即支付跳转到订单页面
    tz() {
      var Price = this.$route.query.totalPrice;
      var id = this.$route.query.ids;
      var number = this.$route.query.number;

      axios.post("/order/add", {
        shoppingId: id,
        userId: sessionStorage.getItem("userId"),
        payment: "1",
        totalPrice: Price,
        number: number,
        total: "0",
      });

      this.$router.push({
        path: "/order",
        query: { totalPrice: Price, ids: id },
      });
    },
    sy() {
      this.$router.push("/");
    },
    clicks(){
      var Price = this.$route.query.totalPrice;
      var id = this.$route.query.ids;
      var number = this.$route.query.number;

      axios.post("/order/add", {
        shoppingId: id,
        userId: sessionStorage.getItem("userId"),
        payment: "0",
        totalPrice: Price,
        number: number,
        total: "0",
      });

      this.$router.push({
        path: "/order",
        query: { totalPrice: Price, ids: id },
      });
    }
  },
  mounted() {
    this.all = this.$route.query;
  },
};
</script>
<style scoped>
.imgs {
  width: 100px;
  height: 50px;
  background-color: red;
}
.texts {
  margin-top: 15px;
}
.btn {
  margin-top: 50px;
}
p {
  font-size: 15px;
}
.redtext {
  color: red;
  font-size: 20px;
}
.card {
  margin-top: 80px;
  margin-bottom: 20px;
}
.zf {
  color: red;
  font-size: 20px;
}
</style>